{% extends "layout.html" %}

{% block content %}

{#    <h3 style="margin-left: 150px">上线APP数量数量变化趋势图</h3>#}
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1400px;height:800px;margin-top: 50px"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {
    title: {
        text: '上线APP数量数量变化趋势图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: ''
    },
    legend: {
        left: 'left',
        data: {{ titles | safe }}
    },
    xAxis: {
        type: 'category',
        name: '',
        splitLine: {show: false},
        data: {{ days | safe }}
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: {
        type: 'value',
        name: ''
    },
    series: {{ data | safe }}
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
{% endblock %}
{% block jss %}
    <script>
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var recipient = button.data('whatever'); // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this);
            modal.find('.modal-title').text('New message to ' + recipient);
            modal.find('.modal-body input').val(recipient)
        })
    </script>
{% endblock %}